<template>
    <div class="info-div">
        <div class="info-top">
            <a-input-search v-model:value="searchText" placeholder="名称" enter-button="检索" size="large"
                @search="onSearch" style="width: 30vw" />
            <a-upload name="file" action="" accept=".xlsx, .xls" :max-count="1" @change="handleChange">
                <a-button size="large">
                    <upload-outlined></upload-outlined>
                    导入
                </a-button>
            </a-upload>
            <a-button size="large" style="background-color: #8FBC8F;" @click="handleAddUser" type="primary">添加</a-button>
        </div>
        <br>

        <h4>高级检索</h4>
        <div>
            <a-form layout="inline" :model="userForm">
                <a-row :gutter="16">
                    <a-col :span="10">
                        <a-form-item>
                            <a-input-group compact style="display: flex; align-items: center">
                                <a-select v-model:value="userForm.searchField" style="width: 100px;">
                                    <a-select-option value="userName">用户名</a-select-option>
                                    <a-select-option value="nickName">昵称</a-select-option>
                                    <a-select-option value="email">邮箱</a-select-option>
                                    <a-select-option value="phone">电话</a-select-option>
                                </a-select>
                                <a-input v-model:value="userForm.searchContent" style="width: 60%" />
                            </a-input-group>
                        </a-form-item>
                    </a-col>

                    <a-col :span="6">
                        <a-form-item label="性别">
                            <a-radio-group v-model:value="userForm.gender">
                                <a-radio value="m">男</a-radio>
                                <a-radio value="w">女</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item>
                            <a-button type="primary" html-type="submit">检索</a-button>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" style="height: 16px"></a-col>
                    <a-col :span="10">
                        <a-form-item label="已删除用户">
                            <a-switch v-model:checked="userForm.isDeleted" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-form-item label="用户身份">
                            <a-select v-model:value="userForm.identify" placeholder="选择用户身份">
                                <a-select-option value="admin">管理员</a-select-option>
                                <a-select-option value="odinary">普通用户</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                </a-row>
            </a-form>
        </div>
        <br>

        <a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 350 }" :pagination="false">
            <template #bodyCell="{ column, record }">

                <template v-if="column.key === 'operation'">
                    <a-space wrap>
                        <a-button size="small" @click="details(record)" type="primary">详情</a-button>
                        <a-button size="small" @click="delUser(record)" type="primary" danger>删除用户</a-button>
                        <a-button size="small" @click="resetPwd(record)" type="primary" ghost>重置密码</a-button>
                    </a-space>
                </template>
                <template v-else-if="column.key === 'gender'">
                    <a-tag v-if="record.gender == 'm'" color="green">男</a-tag>
                    <a-tag v-else color="pink">女</a-tag>
                </template>
                <template v-else-if="column.key === 'avatar'">
                    <a-avatar :src="record.avatar" alt="无头像" />
                </template>

            </template>
        </a-table>
        <a-pagination v-model:current="current" v-model:pageSize="pageSize" :total="total" show-size-changer
            @showSizeChange="showChange" @change="handlePageChange" />
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

let current = ref(1);
let pageSize = ref(10);
let total = ref(500);
let searchText = ref("");

// 用户信息表单，高级搜索使用
const userForm = reactive({
    searchField: 'userName',
    searchContent: '',
    gender: 'm',
    isDeleted: true,
    identify:''
})

const onSearch = () => {
    console.log(searchText.value);
}

const columns = [{
    title: '姓名',
    dataIndex: 'userName',
    key: 'userName',
    fixed: 'left'
}, {
    title: '昵称',
    dataIndex: 'nickName',
    key: 'nickName'
}, {
    title: '头像',
    dataIndex: 'avatar',
    key: 'avatar'
}, {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender'
}, {
    title: '年龄',
    dataIndex: 'age',
    key: 'age'
}, {
    title: '角色',
    dataIndex: 'role',
    key: 'role'
}, {
    title: "操作",
    key: "operation",
    fixed: "right",
    width: 300
}]

const data = [
    {
        userId: "001",
        userName: "张三",
        nickName: "小zhang",
        gender: 'm',
        age: "20",
        role: "普通用户",
        avatar: ""
    }
]

const delUser = (record) => {
    console.log(record);
}

const resetPwd = (record) => {
    console.log(record);
}

// 查看用户信息，用户信息只能用户自己修改
const details = (record) => {
    console.log(record);
}

const handlePageChange = (page, page_size) => {
    console.log(page, page_size);
}

const showChange = (current, page_size) => {
    console.log(current, page_size);
}

const handleChange = info => {
    const { status, response } = info.file
    if (status === 'uploading') {
        message.loading('正在上传...');
        return;
    }
    if (status === 'done') {
        // Get this url from response in real world.
        message.success('上传成功');
        loadData();
    }
    if (status === 'error') {
        message.error('上传失败');
    }
};

const handleAddUser = ()=>{
    router.push("/home/user/add")
}

</script>

<style scoped></style>